<script>
// <!-- 组件目录 -->
import { reactive, toRefs } from "@vue/reactivity";
import { Toast } from "vant";
import { onMounted } from "@vue/runtime-core";
export default {
  setup() {
    const list = reactive({
      emid: 0,
      cataloguelist: null, //目录
      flag: true, //排序
      showFlag:true,
      btn_index:0,
    });

    onMounted(()=>{

   
     //目录数据
    //  getcatalogue(list.emid).then((data) => {
    //     list.cataloguelist = [];
    //     console.log(data.data.volumes);
    //     for (let i = 0; i < data.data.volumes.length; i++) {
    //       for (let j = 0; j < data.data.volumes[i].chapters.length; j++) {
    //         list.cataloguelist.push(data.data.volumes[i].chapters[j]);
    //       }
    //     }
    //     list.cataloguelist[list.btn_index].subscribe = 1
    //     console.log(list.cataloguelist, "目录");
    //   });
 })
        //切换显示隐藏目录
    const catalogueFun = () => {
      list.showFlag = !list.showFlag;
    };

    //排序
    let sortFun = () => {
      Toast.success("切换成功");
      if (list.showFlag) {
        for (let i = 0; i < list.cataloguelist.length; i++) {
          for (let j = 0; j < list.cataloguelist.length - i - 1; j++) {
            if (
              list.cataloguelist[j].chapterIndex <
              list.cataloguelist[j + 1].chapterIndex
            ) {
              let num = list.cataloguelist[j];
              list.cataloguelist[j] = list.cataloguelist[j + 1];
              list.cataloguelist[j + 1] = num;
            }
          }
        }
        list.showFlag = !list.showFlag;
      } else {
        for (let i = 0; i < list.cataloguelist.length; i++) {
          for (let j = 0; j < list.cataloguelist.length - i - 1; j++) {
            if (
              list.cataloguelist[j].chapterIndex >
              list.cataloguelist[j + 1].chapterIndex
            ) {
              let num = list.cataloguelist[j];
              list.cataloguelist[j] = list.cataloguelist[j + 1];
              list.cataloguelist[j + 1] = num;
            }
          }
        }
        list.showFlag = !list.showFlag;
      }
      console.log(list.cataloguelist);
    };

       // 切换目录
    let switchFun = (id) =>{
      list.btn_index = id
      list.cataloguelist.forEach((item,index) => {
        if (index == id) {
          item.subscribe = 1
        }else{
          item.subscribe = 0
        }
      });
      Toast.success("切换目录成功");
    }

    return {
      ...toRefs(list),
      catalogueFun,
      sortFun,
      switchFun
    };
  },
};
</script>
<template>
    <div class="catalogue">
      
    </div>
</template>

<style lang="scss" scoped>
.catalogue{
  
main {
  :deep {
     .van-popup {
       width: 80%;
     }
   }
    padding: 0 15px;
    position: relative;
    .top {
      top: 0;
      position: sticky;
      background-color: #fff;
      padding: 13px 0 22px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        font-size: 14px;
        color: #00ba8a;
      }
    }
    ul {
      li {
        color: #bbb9b9;
        padding: 10px 0;
        display: flex;
        align-items: center;
        font-size: 13px;
        justify-content: space-between;
        i {
          font-size: 14px;
        }
        .active {
          color: #00ba8a;
        }
      }
      .con {
        color: #333;
      }
    }
  }
}
</style>